<template>
  <el-dialog
    :title="title"
    :visible.sync="isshow"
    width="1000px"
    @close="concle()"
  >
    <div class="questionType">
      <div class="typeTitle">问题类型</div>
      <el-select v-model="form.faqTypeId" placeholder="请选择问题类型" class="inputstyle">
        <el-option
          v-for="item in questionTypeList"
          :key="item.faqTypeId"
          :label="item.faqTypeName"
          :value="item.faqTypeId"
        />
      </el-select>
    </div>
    <el-form ref="form" :model="form" label-width="80px" label-position="top" :rules="rules">
      <el-form-item label="问题概述" prop="faqName">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入"
          v-model="form.faqName"
        />
      </el-form-item>
      <el-form-item label="问题详情" prop="faqStem">
        <wangEditor
          :editorValue.sync="form.faqStem"
          ref="editorfaqStem"
        />
      </el-form-item>

      <el-form-item label="解决方案" prop="faqAnswer">
        <wangEditor
          :editorValue.sync="form.faqAnswer"
          ref="editorfaqAnswer"
        />
      </el-form-item>
      <el-form-item style="text-align: right">

        <el-button @click="concle">取消</el-button>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import wangEditor from '@/components/Editor/wangEditor.vue'
import { addfaq, getfaqTypelist, updatefaq, getfaqDetail } from '@/api/commonproblem/problem'

export default {
  components: { wangEditor },
  name: 'addcommonQuestion',
  data() {
    return {
      isshow: false,
      title: '新增',
      questionTypeList: [],
      form: {
        faqTypeId: '',
        faqStem: '',
        faqAnswer: '',
        faqName: ''
      },
      rules: {
        faqName: [
          { required: true, message: '请输入问题概述', trigger: 'blur' }
        ],
        faqStem: [
          { required: true, message: '请输入问题详情', trigger: 'change' }
        ],
        faqAnswer: [
          { required: true, message: '请输入问题解决方案', trigger: 'change' }
        ]
      },
      faqId: ''
    }
  },
  mounted() {
    this.getTypelist()
  },
  methods: {
    show(row) {
      // 重置表单数据
      this.form = {
        faqTypeId: '',
        faqStem: '',
        faqAnswer: '',
        faqName: ''
      }
      if (row) {
        this.title = '修改'
        this.faqId = row.faqId
        this.getdetail()
      } else {
        this.title = '新增'
      }
      this.isshow = true
    },
    // 获取详情
    async getdetail() {
      let res = await getfaqDetail(this.faqId)
      if (res.code == 200) {
        this.form = res.data
      }

    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!this.form.faqTypeId) {
          this.$message.warning('请将问题内容填写完整')
          return
        }
        if ((!this.form.faqAnswer || this.form.faqAnswer == '<p><br></p>') || (!this.form.faqStem || this.form.faqStem == '<p><br></p>')) {
          this.$message.warning('请将问题内容填写完整')
          return
        }
        if (valid) {
          if (this.title == '新增') {
            addfaq(this.form).then(res => {
              if (res.code == 200) {
                this.$message.success('操作成功')
                this.$parent.getquestionList()
              }
            })
          } else {
            updatefaq(this.form).then(res => {
              if (res.code == 200) {
                console.log(res)
                this.$message.success('操作成功')
                this.$parent.getquestionList()
              }
            })

          }
          this.isshow = false
        } else {
          this.$message.warning('请将问题内容填写完整')

        }

      })

    },
    concle() {
      this.isshow = false
      this.form = {
        faqTypeId: '',
        faqStem: '',
        faqAnswer: '',
        faqName: ''

      }
    },
    async getTypelist() {
      let res = await getfaqTypelist()
      if (res.code == 200) {
        this.questionTypeList = res.data
      }
      console.log(res, 'faqTypelist')
    }

  }
}
</script>
<style scoped lang="scss">
.questionType {
  display: flex;
  align-items: center;
}

.typeTitle {
  font-size: 14px;
  font-weight: bold;
  margin-right: 20px;
}

.inputstyle {
  width: 240px;
}

::v-deep .w-e-text {
  min-height: 80px !important;
  height: auto !important;
  overflow-y: unset !important;
}

::v-deep .w-e-text img {
  margin: 0 !important;
}

::v-deep .w-e-text-container {
  min-height: 80px !important;
  height: auto !important;
  z-index: 0 !important;
}

.typeTitle::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
</style>
